<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>萌宠之家 - 首页</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="logo">
            <img src="img/logo.png" alt="萌宠之家">
        </div>
        <ul class="nav-links">
            <li><a href="index.html" class="active">首页</a></li>
            <li><a href="about.html">关于我们</a></li>
            <li><a href="products.html">产品中心</a></li>
            <li><a href="news.html">新闻动态</a></li>
        </ul>
        <div class="auth-buttons">
            <button class="btn btn-login" id="loginBtn">登录</button>
            <button class="btn">注册</button>
        </div>
    </nav>

    <!-- 轮播图 -->
    <div class="slider">
        <div><img src="img/num1.jpg" alt="宠物食品"></div>
        <div><img src="img/num2.jpg" alt="宠物玩具"></div>
    </div>

    <!-- 水平线 -->
    <div class="divider"></div>

    <!-- 登录区域 -->
    <div class="container">
        <section class="login-section">
            <h2>会员登录</h2>
            <div class="security-banner">
                <i class="fas fa-shield-alt"></i>
                <div>
                    <strong>安全提示：</strong> 我们采用高级加密技术保护您的个人信息，请放心登录
                </div>
            </div>
            <form id="login-form">
                <div class="form-group">
                    <label for="login-email">电子邮箱</label>
                    <input type="email" id="login-email" class="form-control" placeholder="请输入您的邮箱">
                    <div class="error-message" id="email-error"></div>
                </div>
                <div class="form-group">
                    <label for="login-password">密码</label>
                    <input type="password" id="login-password" class="form-control" placeholder="请输入密码">
                    <div class="error-message" id="password-error"></div>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn" style="width: 100%;">登录</button>
                </div>
                <div class="form-footer">
                    <div>
                        <input type="checkbox" id="remember">
                        <label for="remember">记住我</label>
                    </div>
                    <a href="#">忘记密码?</a>
                </div>
            </form>
        </section>
    </div>

    <!-- 热门商品 -->
    <section class="hot-products">
        <div class="container">
            <h2 class="section-title">热门推荐</h2>
            <div class="product-grid">
                <div class="product-card">
                    <div class="product-badge">热卖</div>
                    <img src="img/num3.jpg" alt="宠物粮" class="product-image">
                    <div class="product-info">
                        <h3 class="product-title">天然无谷猫粮</h3>
                        <div class="product-price">¥89.00 <span>¥129.00</span></div>
                        <p>采用新鲜三文鱼配方，不含人工添加剂</p>
                        <div class="product-stats">
                            <div class="rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                                <span>4.5</span>
                            </div>
                            <div class="sales">销量: 1256件</div>
                        </div>
                        <button class="btn" style="width: 100%; margin-top: 15px;">加入购物车</button>
                    </div>
                </div>
                
                <!-- 更多商品卡片 -->
            </div>
        </div>
    </section>

    <!-- 特色服务 -->
    <section class="services">
        <div class="container">
            <h2 class="section-title">我们的特色服务</h2>
            <div class="services-grid">
                <!-- 服务卡片 -->
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <!-- 页脚内容 -->
            </div>
            
            <div class="copyright">
                <p>© 2023 萌宠之家. All rights reserved. | 豫ICP备12345678号</p>
            </div>
        </div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
    <script src="js/main.js"></script>
</body>
</html>